import { useSessionStorageState } from 'ahooks'
import _ from 'lodash'
import { Button, Input, Select, Space } from 'antd'
import { DownOutlined } from '@ant-design/icons'

import { selectFilterOption } from '@/utils/utils'
import { getStatusGroupName } from '@oBiz/components/EventSelect/utils'
import { useMerchants } from '@oBiz/hooks/SWRApi/useMerchants'
import { defaultParams, useBoundStore } from './store'
import { getMessageTypeName, getShipTrackStatusName, getVisibleFlagName } from './utils'
import styles from './styles.module.less'

export const Filter = () => {
  const reqData = useBoundStore(v => v.reqData)
  const setReqData = useBoundStore(v => v.setReqData)
  const getData = useBoundStore(v => v.getData)
  const [open, setOpen] = useSessionStorageState(`fba_${$APP}_bizTrackEventFilterOpen`, { defaultValue: false })
  const serviceProviderRes = useMerchants()

  const handleQuery = () => {
    setReqData({ page: 1 })
    getData(true)
  }

  return (
    <div>
      <div className={open ? styles.openFilter : ''}>
        <Space wrap size={18}>
          <Space size={8}>
            <span>搜索</span>
            <Input
              style={{ width: 200 }}
              placeholder="可搜索Status/Reason、中文描述、英文描述.."
              value={reqData.searchWord}
              onChange={search => setReqData({ searchWord: search.target.value || undefined })}
              onPressEnter={handleQuery}
              allowClear
            />
          </Space>
          <Space size={8}>
            <span>ShipTrack要求</span>
            <Select
              style={{ width: 200 }}
              placeholder="请选择要求"
              allowClear
              showSearch
              mode="multiple"
              maxTagCount="responsive"
              maxTagTextLength={2}
              maxTagPlaceholder={omitted => `+${omitted.length}项`}
              loading={serviceProviderRes.loading}
              options={[
                { label: '全部', value: -1 },
                ...getShipTrackStatusName.valueList.map(d => ({ label: getShipTrackStatusName(d), value: d })),
              ]}
              filterOption={selectFilterOption}
              value={reqData.shipTrackRequire}
              onChange={v => setReqData({ shipTrackRequire: v ?? undefined })}
            />
          </Space>
          <Space size={8}>
            <span>对应状态组</span>
            <Select
              style={{ width: 200 }}
              placeholder="请选择对应状态组"
              allowClear
              showSearch
              mode="multiple"
              maxTagCount="responsive"
              maxTagTextLength={2}
              maxTagPlaceholder={omitted => `+${omitted.length}项`}
              options={getStatusGroupName.valueList.map(d => ({ label: getStatusGroupName(d), value: d }))}
              filterOption={selectFilterOption}
              value={reqData.statusGroup}
              onChange={v => setReqData({ statusGroup: v ?? undefined })}
            />
          </Space>
          <Space size={8}>
            <span>类型</span>
            <Select
              style={{ width: 200 }}
              placeholder="请选择类型"
              allowClear
              mode="multiple"
              maxTagCount="responsive"
              maxTagTextLength={2}
              maxTagPlaceholder={omitted => `+${omitted.length}项`}
              options={getMessageTypeName.valueList.map(d => ({ label: getMessageTypeName(d), value: d }))}
              filterOption={selectFilterOption}
              value={reqData.messageType}
              onChange={v => setReqData({ messageType: v ?? undefined })}
            />
          </Space>
          <Space size={8}>
            <span>客户可见</span>
            <Select
              style={{ width: 200 }}
              placeholder="请选择客户可见"
              allowClear
              options={[
                { label: '全部', value: -1 },
                ...getVisibleFlagName.valueList.map(d => ({ label: getVisibleFlagName(d), value: d })),
              ]}
              filterOption={selectFilterOption}
              value={reqData.visibleFlag}
              onChange={v => setReqData({ visibleFlag: v ?? undefined })}
            />
          </Space>
        </Space>
        <Space align="start" size={6}>
          <Space>
            <Button
              onClick={() => {
                setReqData({ ..._.omit(defaultParams, ['size']), page: 1 })
                getData(true)
              }}
            >
              重置
            </Button>
            <Button type="primary" onClick={handleQuery}>
              查询
            </Button>
            <Button type="link" onClick={() => setOpen(!open)}>
              {open ? '收起' : '展开'}
              <DownOutlined rotate={open ? 180 : 0} />
            </Button>
          </Space>
        </Space>
      </div>
    </div>
  )
}
